<template>
  <div class="feedback-container">
    <!-- 波浪导航栏（与Dashboard4保持一致） -->
    <div class="wave-header">
      <div class="wave-container">
        <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none">
          <defs>
            <path id="wave" d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
          </defs>
          <g class="wave-parallax">
            <use xlink:href="#wave" x="50" y="0" fill="rgba(25, 118, 210, 0.7)" />
            <use xlink:href="#wave" x="50" y="3" fill="rgba(25, 118, 210, 0.5)" />
            <use xlink:href="#wave" x="50" y="6" fill="rgba(25, 118, 210, 0.3)" />
          </g>
        </svg>
      </div>
      <div class="nav-content">
        <div class="logo-container">
          <div class="logo">
            <div class="logo-icon">
              <el-icon :size="40"><School /></el-icon>
            </div>
            <div class="logo-text">
              <h1>研究生招生系统</h1>
              <p>Graduate Enrollment System</p>
            </div>
          </div>
        </div>
        <div class="user-info">
          <div class="user-details">
            <span>欢迎回来，{{ studentName }}</span>
            <p>上次登录：{{ lastLogin }}</p>
          </div>
          <el-avatar :size="48" :src="avatar" />
        </div>
      </div>
    </div>

    <!-- 意见箱内容区域 -->
    <main class="feedback-main">
      <div class="feedback-header">
        <h1>意见箱</h1>
        <p>您的建议是我们进步的动力</p>
      </div>

      <div class="feedback-form">
        <el-form :model="form" label-position="top" ref="formRef">
          <el-form-item label="意见类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择意见类型">
              <el-option label="招生流程" value="admission"></el-option>
              <el-option label="系统功能" value="system"></el-option>
              <el-option label="服务态度" value="service"></el-option>
              <el-option label="其他" value="other"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="意见内容" prop="content">
            <el-input
                type="textarea"
                :rows="6"
                v-model="form.content"
                placeholder="请详细描述您的意见或建议"
            ></el-input>
          </el-form-item>

          <el-form-item label="上传附件（可选）" prop="attachments">
            <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                multiple
                :limit="3"
                :on-exceed="handleExceed"
                :file-list="fileList"
            >
              <el-button type="primary">选择文件</el-button>
              <template #tip>
                <div class="el-upload__tip">
                  支持上传图片、文档等文件，单个文件不超过10MB
                </div>
              </template>
            </el-upload>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm">提交意见</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="feedback-history">
        <div class="section-title">
          <el-icon><Document /></el-icon>
          <h3>历史反馈</h3>
        </div>

        <el-table :data="feedbackHistory" style="width: 100%" stripe>
          <el-table-column prop="date" label="提交日期" width="120" />
          <el-table-column prop="type" label="类型" width="120">
            <template #default="scope">
              <el-tag :type="getTagType(scope.row.type)" size="small">
                {{ scope.row.type }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="content" label="内容" />
          <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
              <el-tag :type="statusTagType(scope.row.status)" size="small">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </main>

    <!-- 底部区域（与Dashboard4保持一致） -->
    <footer>
      <div class="footer-content">
        <div class="footer-section">
          <h3>联系方式</h3>
          <p><el-icon><Location /></el-icon> 四川省成都市锦江区四川大学锦江学院</p>
          <p><el-icon><Phone /></el-icon> 028-12345678</p>
          <p><el-icon><Message /></el-icon> jwc@scujj.edu.cn</p>
        </div>

        <div class="footer-section">
          <h3>关注我们</h3>
          <div class="qrcode-container">
            <div class="qrcode">
              <div class="qrcode-placeholder"></div>
              <p>招生公众号</p>
            </div>
            <div class="qrcode">
              <div class="qrcode-placeholder"></div>
              <p>教务公众号</p>
            </div>
          </div>
        </div>

        <div class="footer-section">
          <h3>快速链接</h3>
          <p><a href="#">研究生院主页</a></p>
          <p><a href="#">招生简章</a></p>
          <p><a href="#">导师信息</a></p>
          <p><a href="#">常见问题</a></p>
        </div>
      </div>

      <div class="copyright">
        <p>© 2023 四川大学锦江学院研究生院 版权所有 | 蜀ICP备12345678号</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { School, Document, Location, Phone, Message } from '@element-plus/icons-vue';

// 学生信息（与Dashboard4保持一致）
const studentName = ref('张同学');
const lastLogin = ref('2023-09-20 14:30');
const avatar = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png');

// 表单数据
const form = ref({
  type: '',
  content: '',
});

const formRef = ref();
const fileList = ref([]);

// 反馈历史数据
const feedbackHistory = ref([
  { date: '2023-09-15', type: '系统功能', content: '建议增加报考进度查询功能', status: '已处理' },
  { date: '2023-09-10', type: '招生流程', content: '希望简化报名材料提交步骤', status: '处理中' },
  { date: '2023-09-05', type: '服务态度', content: '招生咨询老师服务态度很好', status: '已处理' },
  { date: '2023-08-28', type: '其他', content: '建议增加导师研究方向筛选功能', status: '待处理' },
]);

// 提交表单
const submitForm = () => {
  if (!form.value.content) {
    ElMessage.error('请填写意见内容');
    return;
  }

  ElMessageBox.confirm('确定提交您的意见吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info'
  }).then(() => {
    // 模拟提交成功
    feedbackHistory.value.unshift({
      date: new Date().toISOString().split('T')[0],
      type: form.value.type || '其他',
      content: form.value.content.substring(0, 50) + (form.value.content.length > 50 ? '...' : ''),
      status: '待处理'
    });

    ElMessage.success('提交成功！感谢您的反馈。');
    resetForm();
  }).catch(() => {
    // 取消提交
  });
};

// 重置表单
const resetForm = () => {
  formRef.value.resetFields();
  fileList.value = [];
};

// 文件上传超出限制
const handleExceed = (files) => {
  ElMessage.warning(`最多只能上传3个文件，本次选择了 ${files.length} 个文件`);
};

// 获取标签类型
const getTagType = (type) => {
  const typeMap = {
    '招生流程': 'primary',
    '系统功能': 'success',
    '服务态度': 'warning',
    '其他': 'info'
  };
  return typeMap[type] || 'info';
};

// 状态标签类型
const statusTagType = (status) => {
  const statusMap = {
    '已处理': 'success',
    '处理中': 'warning',
    '待处理': 'danger'
  };
  return statusMap[status] || 'info';
};
</script>

<style scoped>
.feedback-container {
  font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
  color: #333;
}

/* 波浪导航栏样式（与Dashboard4保持一致） */
.wave-header {
  position: relative;
  background: linear-gradient(135deg, #1a2b4b, #2c5282);
  color: white;
  height: 220px;
  overflow: hidden;
}

/* 意见箱内容区域样式 */
.feedback-main {
  flex: 1;
  padding: 40px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.feedback-header {
  text-align: center;
  margin-bottom: 40px;
}

.feedback-header h1 {
  font-size: 36px;
  color: #1a2b4b;
  margin-bottom: 15px;
}

.feedback-header p {
  font-size: 18px;
  color: #2c5282;
}

.feedback-form {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  margin-bottom: 40px;
}

.feedback-history {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.section-title h3 {
  margin: 0;
  font-size: 20px;
  color: #1a2b4b;
}

.section-title .el-icon {
  color: #2c5282;
  font-size: 24px;
}

/* 底部样式 */
footer {
  background: linear-gradient(135deg, #1a2b4b, #2c5282);
  color: white;
  padding: 40px 20px 20px;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto 30px;
  gap: 40px;
}

.footer-section {
  flex: 1;
}

.footer-section h3 {
  font-size: 18px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: #4a9ff9;
}

.footer-section p {
  margin: 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  opacity: 0.9;
}

.footer-section a {
  color: #a0c6ff;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-section a:hover {
  color: white;
  text-decoration: underline;
}

.qrcode-container {
  display: flex;
  gap: 20px;
  margin-top: 15px;
}

.qrcode {
  text-align: center;
}

.qrcode-placeholder {
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}

.copyright {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .feedback-main {
    padding: 20px;
  }

  .feedback-header h1 {
    font-size: 28px;
  }

  .feedback-form,
  .feedback-history {
    padding: 20px;
  }
}
</style>